{% extends 'home/extends/base.html' %}

{% block title %}
    <title>我的订单</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/home/css/order.css">
    <link rel="stylesheet" type="text/css" href="/static/home/css/order-app.css">

{% endblock %}


{% block con %}
<div class="mainbody order">
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="crumbs col-xs-12 col-sm-12">
            <ol class="breadcrumb">
                <li class="hidden-xs hidden-sm"><a href="/">首页</a></li>
                <li class="hidden-xs hidden-sm"><a href="/">我的商城</a></li>
                <li class="active">地址管理</li>
            </ol>
        </div><!-- 面包屑导航 E-->

        <div class="main clearfix">
            <!-- 左侧导航 -->
            <div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
                <div class="nav-main">
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
                    <a href="{% url 'home_myorder' %}" class="ml ">我的订单</a>

                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
                    <a href="{% url 'home_personal' %}" class="ml">个人信息</a>
                    <a href="{% url 'home_address_list' %}" class="ml active">地址管理</a>

                </div>
            </div><!-- 左侧导航 E-->
            <!-- 右侧内容展示 -->
            <div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
            <div class="row" style="background: #fff;">
            <div class="col-md-10">
               <h3 style="padding-top: 10px;">收货地址</h3>
                <button type="button" class="btn btn-link " data-toggle="modal" data-target="#myModal">
                    新增地址
                </button>
            <!-- 模态框 -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                     </div>
                    <form>
                     <div class="modal-body">
                         <div class="form-group">
                           <label >收货人</label>
                           <input type="text" name="addressname" class="form-control">
                         </div>
                         <div class="form-group">
                           <label >收货地址</label>
                           <input type="text" name="address" class="form-control">
                         </div>

                         <div class="form-group">
                           <label >收货电话</label>
                           <input type="text" name="addressphone" class="form-control">
                         </div>

                         <div class="checkbox">
                           <label>
                             <input type="checkbox" name="status" value="1"> 是否默认
                           </label>
                         </div>

                     </div>
                     <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                       <button type="button" class="btn btn-primary" id="CreateAddress">添加</button>
                     </div>
                    </form>
                   </div>
                 </div>
               </div>
            <br><br><br>
            {% for v in adds %}
                {% if v.status == 1 %}
                <div class="col-md-5" >
                    <address aid="{{ v.id }}" isstatus='true' style="border:2px dashed #f39;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                        <button type="button" class="btn btn-link upaddress " data-toggle="modal" data-target="#{{ v.id }}">
                            修改
                        </button>
                        <button type="button" class="btn btn-link deladdress" >
                            删除
                        </button>
                        <!-- 模态框 -->
                        <div class="modal fade" id="{{ v.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                             <div class="modal-dialog" role="document">
                               <div class="modal-content">
                                 <div class="modal-header">
                                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                   <h4 class="modal-title" id="myModalLabel">修改地址</h4>
                                 </div>
                                <form>
                                    <input type="hidden" name="aid" value="{{ v.id }}">
                                    <div class="modal-body">
                                        <div class="form-group">
                                               <label >收货人</label>
                                               <input type="text" name="addressname" value="{{ v.addressname }}" class="form-control">
                                         </div>
                                         <div class="form-group">
                                               <label >收货地址</label>
                                               <input type="text" name="address" value="{{ v.address }}" class="form-control">
                                         </div>

                                         <div class="form-group">
                                               <label >收货电话</label>
                                               <input type="text" name="addressphone" value="{{ v.addressphone }}" class="form-control">
                                         </div>

                                         <div class="checkbox">
                                               <label>
                                                 <input type="checkbox" name="status" value="1"> 是否默认
                                               </label>
                                         </div>
                                 </div>
                                 <div class="modal-footer">
                                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                   <button type="button" class="btn btn-primary upAddress" >修改</button>
                                 </div>
                                </form>
                               </div>
                             </div>
                           </div>
                      <span style="color: red;float: right">默认地址</span>

                    </address>
                </div>
                {% elif v.status == 0 %}
                <div class="col-md-4 defaddress" >
                    <address  aid="{{ v.id }}" style="border:2px solid #ccc;">
                        <strong>{{ v.addressname }}</strong>
                        <div class="osaddress" style="float: right; display: none" ><a href="{% url 'home_address_defalut' %}?aid={{ v.id }}">设为默认</a></div>
                        <br>
                            {{ v.address }}<br>
                        <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                        <button type="button" class="btn btn-link upaddress" data-toggle="modal" data-target="#{{ v.id }}">
                            修改
                        </button>
                        <button type="button" class="btn btn-link deladdress " >
                            删除
                        </button>
                        <div class="modal fade" id="{{ v.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                             <div class="modal-dialog" role="document">
                               <div class="modal-content">
                                 <div class="modal-header">
                                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                   <h4 class="modal-title" id="myModalLabel">修改地址</h4>
                                 </div>
                                <form>
                                    <input type="hidden" name="aid" value="{{ v.id }}">
                                    <div class="modal-body">
                                        <div class="form-group">
                                               <label >收货人</label>
                                               <input type="text" name="addressname" value="{{ v.addressname }}" class="form-control">
                                         </div>
                                         <div class="form-group">
                                               <label >收货地址</label>
                                               <input type="text" name="address" value="{{ v.address }}" class="form-control">
                                         </div>

                                         <div class="form-group">
                                               <label >收货电话</label>
                                               <input type="text" name="addressphone" value="{{ v.addressphone }}" class="form-control">
                                         </div>

                                         <div class="checkbox">
                                               <label>
                                                 <input type="checkbox" name="status" value="1"> 是否默认
                                               </label>
                                         </div>
                                 </div>
                                 <div class="modal-footer">
                                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                   <button type="button" class="btn btn-primary upAddress" >修改</button>
                                 </div>
                                </form>
                               </div>
                             </div>
                           </div>
                    </address>
                </div>
                {% endif %}
            {% endfor %}
        </div>
            </div>
        </div>
    </div>
</div>
</div>
 <!-- 模态框 -->

{% endblock %}

{% block js %}
<script type="text/javascript">

            //回顶部
      		backTop();
      		//全选
      		allSelect();
      		//登录图片鼠标经过
            topLogin();

            // 地址的添加
            $('#CreateAddress').click(function () {
                var data = {};
                // 获取表单中的数据
                // 获取收货人
                data.addressname = $(this).parents('form').find('input[name=addressname]').val();
                // 获取收货地址
                data.address = $(this).parents('form').find('input[name=address]').val();
                // 获取联系电话
                data.addressphone = $(this).parents('form').find('input[name=addressphone]').val();
                // 设置状态为0
                data.status = 0;
                // 如果选择了默认地址 那把状态改为1   porp()：选中的复选框为True 没选为False
                if($(this).parents('form').find('input[name=status]').prop('checked')){
                    data.status = 1
                }
                // 发送ajax 请求
                $.get('{% url 'home_address_insert' %}',data,function(data){
                    if(data.error == 0){
                        location.href = location.href
                    }
                    alert(data.msg)
                })
            });

            // 地址的修改
            $('.upAddress').click(function () {
                var data = {};
                // 获取表单中的数据
                // 获取 id
                data.aid = $(this).parents('form').find('input[name=aid]').val();
                // 获取收货人
                data.addressname = $(this).parents('form').find('input[name=addressname]').val();
                // 获取收货地址
                data.address = $(this).parents('form').find('input[name=address]').val();
                // 获取联系电话
                data.addressphone = $(this).parents('form').find('input[name=addressphone]').val();
                // 设置状态为0
                data.status = 0;
                // 如果选择了默认地址 那把状态改为1   porp()：选中的复选框为True 没选为False
                if($(this).parents('form').find('input[name=status]').prop('checked')){
                    data.status = 1
                }
                // 发送ajax 请求
                $.get('{% url 'home_address_up' %}',data,function(data){
                    if(data.error == 0){
                        location.href = location.href
                    }
                    alert(data.msg)
                })
            });

            // 地址的删除
            $('.deladdress').click(function () {
                // 获取该地址的 id
                var id = $(this).parent('address').attr('aid');
                // 发送ajax 请求
                $.get('{% url 'home_address_del' %}',{'id':id},function(data){
                    if(data.error == 0){
                        location.href = location.href
                    }
                    alert(data.msg)
                })
            });


            // 默认地址的修改
            $('.defaddress').mouseover(function () {
                $(this).find('.osaddress').show()
            });
            $('.defaddress').mouseout(function () {
                $(this).find('.osaddress').hide()
            })
	</script>
{% endblock %}